<template>
  <div class="addMission">
    <div class="back" @click="back()">返回</div>
    <el-form
      :model="addForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="农事类型" prop="code">
        <el-select v-model="addForm.code"  placeholder="请选择农事类型">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地块">
        <el-input v-model="landDetail.landName" :disabled="true"> </el-input>
      </el-form-item>
      <el-form-item label="农资" v-if="NsCode(addForm.code)">
        <el-button
          class="addFramStockBtn"
          @click="dialogVisible = !dialogVisible"
          ><i class="el-icon-plus"></i> 添加农资</el-button
        >
        <div class="farmStockListBox" v-if="!addBtnShow">
          <div
            class="farmStockList"
            v-for="(item, index) in addForm.agriList"
            :key="item.id"
          >
            <div class="icon">
              <img src="../../assets/img/huafeiicon.png" alt="" />
            </div>
            <div class="content">
              <div class="farmStockName">{{ item.name }}</div>
              <div class="manufacturer">{{ item.manufacturer }}</div>
            </div>
            <!-- 校验数组 -->
            <div class="num">
              <el-form-item
                :prop="`agriList.${index}.num`"
                :rules="rules.agriList.num"
              >
                <!-- <el-form-item prop="agriList"> -->
                <!-- <el-input style="width:10px;" class="inp" v-model="item.num" /> -->
                <el-input placeholder="" v-model="item.num">
                  <template slot="append">公斤</template>
                </el-input>
              </el-form-item>
            </div>
            <div class="del" @click="del(item.agriId)">
              <i class="el-icon-error"></i>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="作业方式" prop="way">
        <el-radio-group v-model="addForm.way">
          <el-radio-button label="人工"></el-radio-button>
          <el-radio-button label="机械"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="操作时间" prop="time">
        <el-date-picker
          v-model="addForm.time"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="操作人" prop="participantsId">
        <el-select v-model="addForm.participantsId" placeholder="请选择操作人">
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.name"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="农事照片">
        <upload ref="upload" :fileList="addForm.picture"></upload>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          type="textarea"
          placeholder="请输入备注"
          v-model="addForm.remark"
          style="width: 3.5rem"
          :rows="3"
          maxlength="30"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 农资弹窗 -->
    <el-dialog
      title="选择农资"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <farmStockDialog
        :farmStockList="farmStockList"
        :total="total"
        @addFarmStock="addFarmStock"
        :farmStockAddList="farmStockAddList"
      ></farmStockDialog>
    </el-dialog>
  </div>
</template>

<script>
import {
  delpictureApi,
  addArgiMissionApi,
  getUserListApi,
  getFarmsStockInventoryApi
} from '@/api/mission'
import { getSysSonDictListApi } from '@/api/dict'
import upload from './components/upload.vue'
import farmStockDialog from './components/farmStockDialog'
export default {
  name: 'SevencolorUserIndex',
  components: {
    upload, // 上传组件
    farmStockDialog
  },

  data () {
    return {
      addForm: {
        baseId: '',
        code: '', // 农事编码
        landId: 1,
        participants: '', // 操作人
        participantsId: '', // 操作人Id
        time: '',
        way: '', // 操作方式
        picture: [],
        remark: '',
        agriList: []
      },
      params: {
        current: 1,
        pageSize: 2
      },
      total: null,
      baseId: 1,
      addMissionData: {},
      rules: {
        code: [{ required: true, message: '请选择农事类型', trigger: 'blur' }],
        way: [{ required: true, message: '请选作业类型', trigger: 'blur' }],
        time: [{ required: true, message: '请选择农事时间', trigger: 'blur' }],
        participantsId: [
          { required: true, message: '请选择操作人', trigger: 'blur' }
        ],
        agriList: {
          num: [{ required: true, message: '请输入农资数量', trigger: 'blur' }]
        }
      },
      options: [],
      userList: [], // 用户字典0
      dialogVisible: false, // 农资弹窗
      farmStockList: [], // 农资弹窗库存
      farmStockAddList: [], // 农资添加
      addBtnShow: true
    }
  },
  computed: {
    pictureList () {
      return this.$store.getters.pictureList
    },
    landDetail () {
      return this.$store.getters.landDetail
    },
    missionDetail () {
      return this.$store.getters.missionDetail
    }
  },
  mounted () {
    this.baseId = this.$store.getters.userInfo.baseId
    this.addForm.baseId = this.$store.getters.userInfo.baseId
    this.getSysSonDictList('NS')
    this.addMissionData = this.$route.query
    this.editForm()
    this.getUserList()
    console.log(this.$route.query)
  },

  methods: {
    // 字典接口
    async getSysSonDictList (code) {
      const res = await getSysSonDictListApi(code)
      this.options = res.data
      // console.log(this.landDetail, '地块详情')
      // 农资库存
      const res2 = await getFarmsStockInventoryApi(this.params)
      this.farmStockList = res2.data.records
      this.total = res2.data.total
    },
    // 用户list
    async getUserList () {
      const res = await getUserListApi(this.baseId)
      // console.log(res)
      this.userList = res.data
    },
    // 选择农资关闭弹窗子传父事件
    addFarmStock (data) {
      this.dialogVisible = false
      this.addBtnShow = false
      // console.log(data)
      const farmsStock = {}
      farmsStock.agriId = data.agriDicId
      farmsStock.type = data.type
      farmsStock.name = data.name
      farmsStock.manufacturer = data.manufacturer
      console.log(farmsStock)
      this.farmStockAddList.push(farmsStock)
      this.addForm.agriList = this.farmStockAddList
      console.log(this.farmStockAddList)
    },
    // 返回
    back () {
      if (this.$route.query.pageType === '1') {
        this.$router.push({
          path: '/shuzhongtian/agriMissionList',
          query: { ...this.$route.query }
        })
      } else {
        this.$router.push({
          path: '/shuzhongtian/agriLandDetail',
          query: { ...this.$route.query }
        })
      }
    },
    // 农资按钮显示
    NsCode (code) {
      switch (code) {
        case 'NS_SF':
          return true
        case 'NS_FZ':
          return true
      }
    },
    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.addForm.picture = this.pictureList.join(',')
          this.addForm.baseId = this.landDetail.baseId
          this.addForm.landId = this.landDetail.landId
          console.log(this.addForm)
          const res = await addArgiMissionApi(this.addForm)
          if (res.code === 200) {
            this.$message.success('提交成功')
          }
          this.addForm = {}
          this.$router.push({
            path: '/shuzhongtian/agriLandDetail',
            query: { ...this.$route.query }
          }) // 返回详情
        } else {
          this.$message.error('请正确填写')
          return false
        }
      })
    },
    // 农资弹窗关闭
    handleClose (dome) {
      dome()
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$refs.upload.clearFiles()
      if (this.pictureList.length > 0) {
        for (let i = 0; i < this.pictureList.length; i++) {
          delpictureApi(this.pictureList[i])
        }
        this.$store.dispatch('mission/removePictureList')
      }
    },
    // 编辑
    editForm () {
      // console.log(this.addForm)
      if (this.missionDetail.id !== null) {
        // console.log(this.missionDetail, '农事')
        this.addForm.code = this.missionDetail.code
        this.addForm.participants = this.missionDetail.participants
        // this.addForm.area = this.missionDetail.area
        this.addForm.time = this.missionDetail.time
        this.addForm.way = this.missionDetail.way
        if (this.missionDetail.picture !== '') {
          this.addForm.picture = this.missionDetail.picture
        }
        this.addForm.remark = this.missionDetail.remark
      }
    }
  }
}
</script>
<style scoped lang="scss">
.addMission {
  width: 80.2083vw;
  height: 48.4375vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  position: relative;
  padding: 4.5313vw * 0.834 3.6458vw;
  overflow-y: auto;
  ::v-deep .el-input__inner {
  width: 3.5rem !important;
}
}
.back {
  position: absolute;
  top: 5%;
  left: 5%;
}

.farmStockListBox {
  .farmStockList {
    width: 23.9583vw;
    height: 5.1667vw * 0.834;
    background: #edf1f4;
    border-radius: 12px 12px 12px 12px;
    padding: 0.6771vw * 0.834 1.0417vw;
    display: flex;
    line-height: 4.1667vw * 0.834;
    margin-bottom: 0.5208vw;
    position: relative;
    .icon {
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 1.0417vw;
      padding: 0.5208vw;
      align-items: center;
    }
    .content {
      height: 2.9646vw * 0.834;
      white-space: nowrap;
      margin-right: 1.8229vw;
      .farmStockName {
        // margin-bottom: 0.4167vw * 0.834;
        height: 1.6021vw * 0.834;
        white-space: nowrap;
        line-height: 1.6021vw * 0.834;
      }
      .manufacturer {
        height: 1.0417vw * 0.834;
        white-space: nowrap;
        line-height: 1.6021vw * 0.834;
        font-size: 14px;
        color: #999999;
      }
    }
    .num {
      // padding: 0 0.2604vw;
      margin-top: 0.9208vw * 0.834;
      // width: 7.2917vw;
      // height: 2.0833vw * 0.834;
      // background: #ffffff;
      // border-radius: 8px 8px 8px 8px;
      // border: 1px solid #dcdedf;
      // position: relative;
 ::v-deep .el-input__inner {
  width: 1rem !important;
}
      .unit {
        position: absolute;
        right: 10%;
        height: 1.8vw * 0.834;
        font-size: 0.7292vw;
        top: -50%;
        color: #333;
      }
    }
    .del {
      width: 1.6vw;
      height: 1.6vw;
      position: absolute;
      right: 5%;
      top: 20%;
      i {
        font-size: 1.5vw;
        color: red;
      }
    }
  }
}

.addFramStockBtn {
  width: 10.4167vw;
  height: 3.1667vw * 0.834;
  border-radius: 12px 12px 12px 12px;
  background: #e8f7ef;
  color: #19b560;
  font-weight: 600;
  font-size: 0.9375vw;
  margin-bottom: 0.5208vw * 0.834;
}
</style>
